<template>
	<view>
		<view class="playlist animated fadeInUp faster" v-show="isPlaylistShow">
			<view class="title u-f-ac">
				<image src="../../../static/playing/cm2_list_icn_rdi_new@2x.png" mode="widthFix"
				style="width: 50upx;"></image>
				<text style="margin-left: 5upx;">循环列表 ({{playlist.length}})</text>
			</view>
			<scroll-view scroll-y class="scroll-view">
				<view class="scroll-view_item "  :class="item.id==Id?'active':''"
				v-for="item in playlist" :data-id="item.id"
				:key="item.id" @tap='musicWitch'>
					<text class=".eps-1" style="font-size:28upx;max-width: 580upx;" >{{item.name}} </text>
					<text class=".eps-1" style=" padding-left: 10upx;font-size:24upx;color:#767676;"  >{{item.author}}</text>
				</view>
			</scroll-view>
			<view class="close u-f-ajc"
			@tap="playlistClose"
			>
				<text>关闭</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		props:{
			isPlaylistShow:Boolean,
		},
		data() {
			return {
			}
		},
		computed: {
			...mapState(['Id','playIdList','playlist']),
		},
		methods: {
			//关闭按钮
			playlistClose(){
				this.$emit('plColse');
			},
			//歌曲切换
			musicWitch(e){
				let {id}=e.currentTarget.dataset;
				if(this.Id!=id){
					this.$emit('switch',id,false);
				}
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.playlist{
		position: absolute;
		z-index: 50;
		bottom: 25upx;
		left: 35upx;
		right: 35upx;
		height: 600upx;
		background-color: #b1b4b2;
		opacity: 0.99;
		border-radius: 20upx 20upx 20upx 20upx;
		.title{
			width: 100%;
			height: 70upx;
			font-size: 26upx;
			color:#6e6e6f;
			padding: 20upx 0 25upx 20upx;
			border-bottom:2upx solid #c7c7c7;
		}
		.scroll-view{
			width: 100%;
			height: 450upx;
			color:#444545;
			border-bottom:2upx solid #c7c7c7;
			.scroll-view_item{
				width: 100%;
				height: 70upx;
				padding: 15upx 0 15upx 20upx;
				border-bottom:2upx solid #c7c7c7;
				display: flex;
				align-items: center;
			}
			.active{
				color: #d94f43;
			}
		}
		.close{
			height: 80upx;
		}
	}
</style>
